<!-- 聊天气泡 -->
<script setup lang="ts">
defineProps<{
  avatar: string
  direction: 'toRight' | 'toLeft'
  content: string
}>()
</script>

<template>
  <view class="my-25rpx flex items-start px-25rpx -scale-y-100" :class="[direction === 'toRight' ? 'flex-row' : 'flex-row-reverse']">
    <image class="h-80rpx w-80rpx flex-shrink-0 rounded-full bg-#EBEBEB" :src="avatar" />
    <Spacer class="flex-shrink-0" width="30" />
    <view class="relative max-w-590rpx rounded-20rpx bg-white p-20rpx card-shadow">
      <text class="break-words text-wrap text-26rpx text-#333333 leading-40rpx" :user-select="true">
        {{ content }}
      </text>
      <image class="absolute top-18rpx h-44rpx w-20rpx" :class="[direction === 'toRight' ? '-left-20rpx' : '-right-20rpx rotate-180']" src="@/static/images/chat_bubble_arrow.png" />
    </view>
  </view>
</template>
